<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
    <navigation></navigation>
    <div class="min-h-screen bg-gray-50">
        <!-- 主要内容区域 -->
        <div class="max-w-7xl mx-auto py-8 px-4">
            <div class="text-center mb-8">
                <h1 class="text-2xl font-medium text-gray-900 mb-2">个人简历 / RESUME</h1>
            </div>
            <el-row :gutter="32">
                <!-- 左侧简历表单 -->
                <el-col :span="16">
                    <el-card class="mb-8">
                        <div class="flex items-start space-x-8 mb-10">
                            <div class="flex-1">
                                <el-form :model="form" label-position="top">
                                    <el-row :gutter="32">
                                        <el-col :span="12">
                                            <el-form-item label="姓名">
                                                <el-input v-model="form.name" disabled prefix-icon="el-icon-user"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="电话">
                                                <el-input v-model="form.phone" disabled prefix-icon="el-icon-phone"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item label="应聘岗位">
                                        <el-input v-model="form.position" disabled prefix-icon="el-icon-suitcase"></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="relative">
                                <div class="w-40 h-40 bg-gray-50 rounded-lg overflow-hidden">
                                    <el-image :src="avatarUrl" fit="cover" class="w-full h-full"></el-image>
                                </div>
                            </div>
                        </div>
                        <!-- 工作经历 -->
                        <div class="mb-10">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="text-lg font-medium text-blue-600 flex items-center">
                                    <el-icon class="mr-2"><Briefcase /></el-icon>
                                    工作经历
                                </h3>
                                <el-button type="primary" icon="el-icon-plus" circle></el-button>
                            </div>
                            <el-card shadow="hover" class="cursor-pointer">
                                <div class="flex items-center justify-center h-24">
                                    <p class="text-gray-400 flex items-center">
                                        <el-icon class="mr-2"><Plus /></el-icon>
                                        添加工作经历
                                    </p>
                                </div>
                            </el-card>
                        </div>
                        <!-- 实习经历 -->
                        <div class="mb-10">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="text-lg font-medium text-blue-600 flex items-center">
                                    <el-icon class="mr-2"><Monitor /></el-icon>
                                    实习经历
                                </h3>
                                <el-button type="primary" icon="el-icon-plus" circle></el-button>
                            </div>
                            <el-card shadow="hover" class="cursor-pointer">
                                <div class="flex items-center justify-center h-24">
                                    <p class="text-gray-400 flex items-center">
                                        <el-icon class="mr-2"><Plus /></el-icon>
                                        添加实习经历
                                    </p>
                                </div>
                            </el-card>
                        </div>
                        <!-- 教育经历 -->
                        <div class="mb-10">
                            <div class="flex items-center justify-between mb-6">
                                <h3 class="text-lg font-medium text-blue-600 flex items-center">
                                    <el-icon class="mr-2"><School /></el-icon>
                                    教育经历
                                </h3>
                                <el-button type="primary" icon="el-icon-plus" circle></el-button>
                            </div>
                            <el-card shadow="hover" class="cursor-pointer">
                                <div class="flex items-center justify-center h-24">
                                    <p class="text-gray-400 flex items-center">
                                        <el-icon class="mr-2"><Plus /></el-icon>
                                        添加教育经历
                                    </p>
                                </div>
                            </el-card>
                        </div>
                        <!-- 自我评价 -->
                        <div class="mb-10">
                            <h3 class="text-lg font-medium text-blue-600 flex items-center mb-6">
                                <el-icon class="mr-2"><ChatLineRound /></el-icon>
                                自我评价
                            </h3>
                            <el-form-item>
                                <el-input
                                        type="textarea"
                                        v-model="form.selfEvaluation"
                                        :rows="6"
                                        placeholder="请简要描述你的个人特点、技能专长、职业规划等..."
                                        show-word-limit
                                        :maxlength="500"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div class="flex justify-center">
                            <el-button type="primary" icon="el-icon-document-add" class="!rounded-button whitespace-nowrap">
                                保存简历
                            </el-button>
                        </div>
                    </el-card>
                </el-col>
                <!-- 右侧推荐职位 -->
                <el-col :span="8">
                    <el-card class="mb-4">
                        <template #header>
                            <div class="card-header">
                                <span>往期简历列表</span>
                            </div>
                        </template>
                        <el-space direction="vertical" class="w-full">
                            <div v-for="resume in resumes" :key="resume.id" class="flex justify-between items-start pb-4 border-b border-gray-100 last:border-b-0 min-w">
                                <div>
                                    <h4 class="font-medium mb-1">{{ resume.title }}</h4>
                                    <p class="text-sm text-gray-500">{{ resume.updateTime }} 更新</p>
                                </div>
                                <el-button type="primary" plain size="small" class="!rounded-button whitespace-nowrap">查看</el-button>
                            </div>
                        </el-space>
                    </el-card>
                    <div class="flex justify-center">
                        <el-pagination
                                :page-size="4"
                                :total="16"
                                layout="prev, pager, next"
                        ></el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';
    import { Briefcase, Monitor, School, ChatLineRound, Plus } from '@element-plus/icons-vue';
    import navigation from '../../views/navigation.vue'
    const form = ref({
        name: '王伟明',
        phone: '13812345678',
        position: '高级前端开发工程师',
        selfEvaluation: ''
    });

    const avatarUrl = ref('https://ai-public.mastergo.com/ai/img_res/b7b47d58fcb34399ce64a987958ff61e.jpg');

    const resumes = ref([
        { id: 1, title: '前端开发工程师简历', updateTime: '2024-01-15' },
        { id: 2, title: '全栈工程师简历', updateTime: '2023-12-20' },
        { id: 3, title: 'Web 开发工程师简历', updateTime: '2023-11-05' }
    ]);

    const saveResume = () => {
        ElMessage.success('简历保存成功');
    };
</script>

<style scoped>
    .el-input-number.is-controls-right .el-input__wrapper {
        padding-left: 11px;
        padding-right: 0;
    }
  .min-w{
      min-width: 195px;
  }
</style>

